import { reactive, ref, Ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { listDatasource, getDatasource, delDatasource, addDatasource, updateDatasource } from "@/api/system/datasource";
interface IQueryParams {
  pageNum: number;
  pageSize: number;
  [propName: string]: any;
}
interface IBaseData {
  datasourceList: any[];
  queryParams: IQueryParams;
  rules: any;
  open: boolean;
  loading: boolean;
  showSearch: boolean;
  ids: any[];
  single: boolean;
  multiple: boolean;
  total: number;
  title: string;
  background: boolean;
  small: boolean;
  form: any;
  domHeight: number;
  isExpand: boolean;
  [propName: string]: any;
}
export class table {
  public baseData: IBaseData;
  constructor() {
    this.baseData = reactive({
      datasourceList: [
        { name: "111" },
        { name: "222" },
        { name: "333" },
        { name: "444" },
        { name: "555" },
        { name: "666" },
        { name: "777" },
        { name: "888" }
      ] as any[],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        host: null,
        port: null,
        username: null,
        password: null,
        isStatus: null,
        isConnect: null
      },
      rules: {},
      open: false,
      loading: true,
      showSearch: true,
      ids: [] as any[],
      single: true,
      multiple: true,
      total: 0,
      title: "",
      background: true,
      small: true,
      form: {} as any,
      domHeight: 500, // 表格高度
      isExpand: false // 展开按钮是否展开
    });
    // this.getList()
    // this.getDomHeight()
  }

  /**
   * 改变当前页条数
   * @param val
   * @type number
   */
  handleSizeChange = (val: number) => {
    this.baseData.queryParams.pageSize = val;
    this.getList();
  };

  /**
   * 改变当前页码
   * @param val
   * @type number
   */
  handleCurrentChange = (val: number) => {
    this.baseData.queryParams.pageNum = val;
    this.getList();
  };

  /**
   * 计算 table 高度
   * @param proxy 当前页面实例
   * @type any
   */
  getDomHeight = (proxy: any) => {
    console.log(proxy);
    this.baseData.domHeight =
      // 804是当前页面高度
      804 -
      proxy.$refs.boxPagination.offsetHeight -
      proxy.$refs.boxHeader.offsetHeight -
      proxy.$refs.boxContent.offsetHeight -
      // 50是margin或padding 在垂直方向的总和
      50;
  };

  /**
   * 查询数据源 数据源列表
   */
  getList = () => {
    this.baseData.loading = true;
    listDatasource(this.baseData.queryParams).then((response: any) => {
      this.baseData.datasourceList = response.rows;
      this.baseData.total = response.total;
      this.baseData.loading = false;
    });
  };

  /**
   * 取消按钮
   */
  cancel = () => {
    this.baseData.open = false;
    this.reset();
  };

  /**
   * 表单重置
   */
  reset() {
    this.baseData.form = {
      id: null,
      updateTime: null,
      name: null,
      host: null,
      port: null,
      username: null,
      password: null,
      isStatus: "0",
      createTime: null,
      isConnect: null
    };
  }

  /**
   * 搜索按钮操作
   */
  handleQuery = () => {
    this.baseData.queryParams.pageNum = 1;
    this.getList();
  };

  /**
   * 重置按钮操作
   * @param proxy 表单实例
   * @type any
   */
  resetQuery = (proxy: any) => {
    proxy.$refs["queryRef"].resetFields(); // 重置表单
    this.handleQuery();
  };

  /**
   * 多选框选中数据
   * @param selection
   * @type any
   */
  handleSelectionChange = (selection: any) => {
    this.baseData.ids = selection.map((item: any) => item.id);
    this.baseData.single = selection.length !== 1;
    this.baseData.multiple = !selection.length;
  };

  /**
   * 新增按钮操作
   */
  handleAdd = () => {
    this.reset();
    this.baseData.open = true;
    this.baseData.title = "添加数据源 数据源";
  };

  /**
   * 修改按钮操作
   * @param row 表格行数据
   * @type any
   */
  handleUpdate = (row: any) => {
    this.reset();
    const _id = row.id || this.baseData.ids;
    getDatasource(_id).then((response: any) => {
      this.baseData.form = response.data;
      this.baseData.open = true;
      this.baseData.title = "修改数据源 数据源";
    });
  };

  /**
   * 提交按钮
   * @param proxy 表单实例
   * @type any
   */
  submitForm = (proxy: any) => {
    proxy.$refs["dataFormRef"].validate(valid => {
      if (valid) {
        if (this.baseData.form.id !== null) {
          updateDatasource(this.baseData.form).then((response: any) => {
            // eslint-disable-next-line new-cap
            ElMessage({
              type: "success",
              message: "修改成功"
            });
            this.baseData.open = false;
            this.getList();
          });
        } else {
          addDatasource(this.baseData.form).then((response: any) => {
            if (response.code === 200) {
              // eslint-disable-next-line new-cap
              ElMessage({
                type: "success",
                message: "新增成功"
              });
            }
            this.baseData.open = false;
            this.getList();
          });
        }
      }
    });
  };

  /**
   * 删除按钮操作
   * @param row 表格一行的数据
   */
  handleDelete = (row: any) => {
    const _ids = row.id || this.baseData.ids;
    ElMessageBox.confirm(`是否确认删除数据源 数据源编号为"${_ids}"的数据项？`, "Warning", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => delDatasource(_ids))
      .then(() => {
        // eslint-disable-next-line new-cap
        ElMessage({
          type: "success",
          message: "删除成功"
        });
        this.getList();
      })
      .catch(() => {
        // eslint-disable-next-line new-cap
        ElMessage({
          type: "error",
          message: "删除失败"
        });
      });
  };

  /**
   * 导出
   * @param proxy
   */
  handleExport = (proxy: any) => {
    proxy.download("", { ...this.baseData.queryParams }, `datasource_${new Date().getTime()}.xlsx`);
  };
}
